<template>
  <div class="height-100">
    订单管理页面
    <span>
      <input type="checkbox" class="inp1" id="inp1" />
      <label for="inp1"></label>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {},
  methods: {}
}
</script>

<style lang="less" scoped>
span {
  position: relative;
}
.inp1 {
  position: absolute;
  visibility: hidden;
}
.inp1 + label {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid #bec3cc;
  opacity: 1;
  border-radius: 4px;
}
.inp1:checked + label:after {
  position: absolute;
  font-family: 'iconfont';
  content: '\e61c';
  font-weight: 100;
  color: #fff;
  width: 32px;
  height: 32px;
  line-height: 32px;
  background: #409eff;
  opacity: 1;
  border-radius: 4px;
  transform: scale(50%);
  transform-origin: 0 0;
}
</style>
